<template>
  <div class="edu-form-upload">
    <div class="avatar-uploader" v-if="current_args.upload_type == 'avatar'">
      <el-upload
        class="upload-container"
        :class="{ 'hide-upload': hideUpload }"
        action=""
        :accept="$util.getDefValue(current_args.accept, 'image/*')"
        :show-file-list="false"
        :on-remove="fileOnRemove"
        :on-success="fileOnSuccess"
        :on-error="fileOnError"
        :on-progress="fileOnProgress"
        :on-change="fileOnChange"
        :before-upload="fileOnBeforeUpload"
        :before-remove="fileOnBeforeRemove"
        :http-request="fileUpload"
        :disabled="disabledValue"
        :ref="'upload_' + field"
        :on-exceed="onExceed"
      >
        <img v-if="showUrl" :src="showUrl" class="avatar" />
        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        <div
          slot="tip"
          class="el-upload__tip"
          v-text="$util.getDefValue(current_args.placeholder, '')"
        ></div>
      </el-upload>
    </div>
    <div class="picture-uploader" v-else-if="current_args.upload_type == 'pictureCard'">
      <el-upload
        class="upload-container"
        :class="{ 'hide-upload': hideUpload }"
        action=""
        :multiple="multipleValue"
        :accept="$util.getDefValue(current_args.accept, 'image/*')"
        :limit="limitCount"
        list-type="picture-card"
        :on-remove="fileOnRemove"
        :on-success="fileOnSuccess"
        :on-error="fileOnError"
        :on-progress="fileOnProgress"
        :on-change="fileOnChange"
        :before-upload="fileOnBeforeUpload"
        :before-remove="fileOnBeforeRemove"
        :http-request="fileUpload"
        :disabled="disabledValue"
        :file-list="fileList"
        :ref="'upload_' + field"
        :on-exceed="onExceed"
      >
        <i class="el-icon-plus avatar-uploader-icon"></i>
        <span class="avatar-uploader-icon-text">点击上传</span>
        <div
          slot="tip"
          class="el-upload__tip"
          v-if="current_args.placeholder"
          v-text="$util.getDefValue(current_args.placeholder, '')"
        ></div>
      </el-upload>
    </div>
    <div v-else-if="current_args.upload_type == 'pictureList'">
      <el-upload
        class="upload-container"
        :class="{ 'hide-upload': hideUpload }"
        action=""
        :multiple="multipleValue"
        :accept="$util.getDefValue(current_args.accept, 'image/*')"
        :limit="limitCount"
        list-type="picture"
        :on-remove="fileOnRemove"
        :on-success="fileOnSuccess"
        :on-error="fileOnError"
        :on-progress="fileOnProgress"
        :on-change="fileOnChange"
        :before-upload="fileOnBeforeUpload"
        :before-remove="fileOnBeforeRemove"
        :http-request="fileUpload"
        :disabled="disabledValue"
        :file-list="fileList"
        :on-exceed="onExceed"
      >
        <el-button size="small" type="primary">点击上传</el-button>
        <div
          slot="tip"
          class="el-upload__tip"
          v-text="$util.getDefValue(current_args.placeholder, '')"
        ></div>
      </el-upload>
    </div>
    <div v-else-if="current_args.upload_type == 'drag'">
      <el-upload
        class="upload-container"
        :class="{ 'hide-upload': hideUpload }"
        action=""
        :multiple="multipleValue"
        drag
        :disabled="disabledValue"
        :accept="$util.getDefValue(current_args.accept, '*/*')"
        :limit="limitCount"
        :list-type="$util.getDefValue(current_args.list_type, 'text')"
        :on-remove="fileOnRemove"
        :on-success="fileOnSuccess"
        :on-error="fileOnError"
        :on-progress="fileOnProgress"
        :on-change="fileOnChange"
        :before-upload="fileOnBeforeUpload"
        :before-remove="fileOnBeforeRemove"
        :http-request="fileUpload"
        :file-list="fileList"
        :on-exceed="onExceed"
      >
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">
          将文件拖到此处，或
          <em>点击上传</em>
        </div>
        <div
          slot="tip"
          class="el-upload__tip"
          v-text="$util.getDefValue(current_args.placeholder, '')"
        ></div>
      </el-upload>
    </div>
    <div v-else-if="current_args.upload_type == 'custom'">
      <el-upload
        class="upload-container"
        :ref="'upload_' + field"
        action=""
        :multiple="multipleValue"
        :auto-upload="false"
        :disabled="disabledValue"
        :accept="$util.getDefValue(current_args.accept, '*/*')"
        :limit="1"
        :list-type="$util.getDefValue(current_args.list_type, 'text')"
        :on-remove="fileOnRemove"
        :on-success="fileOnSuccess"
        :on-error="fileOnError"
        :on-progress="fileOnProgress"
        :on-change="fileOnChange"
        :before-upload="fileOnBeforeUpload"
        :before-remove="fileOnBeforeRemove"
        :http-request="fileUpload"
        :file-list="fileList"
        :on-exceed="onExceed"
      >
        <el-button slot="trigger" type="primary">选取文件</el-button>
        <el-button style="margin-left: 10px;" type="success" @click="submitUpload"
          >上传到服务器</el-button
        >
        <div
          slot="tip"
          class="el-upload__tip"
          v-text="$util.getDefValue(current_args.placeholder, '')"
        ></div>
      </el-upload>
    </div>
    <div v-else-if="current_args.upload_type == 'textList'">
      <el-upload
        class="upload-container"
        :class="{ 'hide-upload': hideUpload }"
        action=""
        :multiple="multipleValue"
        :disabled="disabledValue"
        :accept="$util.getDefValue(current_args.accept, '*/*')"
        :limit="limitCount"
        :list-type="$util.getDefValue(current_args.list_type, 'text')"
        :on-remove="fileOnRemove"
        :on-success="fileOnSuccess"
        :on-error="fileOnError"
        :on-progress="fileOnProgress"
        :on-change="fileOnChange"
        :before-upload="fileOnBeforeUpload"
        :before-remove="fileOnBeforeRemove"
        :http-request="fileUpload"
        :file-list="fileList"
        :on-exceed="onExceed"
      >
        <el-button type="primary">点击上传</el-button>
        <div
          slot="tip"
          class="el-upload__tip"
          v-text="$util.getDefValue(current_args.placeholder, '')"
        ></div>
      </el-upload>
    </div>
    <div v-else>
      <el-upload
        class="upload-container"
        action=""
        :multiple="multipleValue"
        :auto-upload="autoUploadValue"
        :disabled="disabledValue"
        :accept="$util.getDefValue(current_args.accept, '*/*')"
        :limit="limitCount"
        :list-type="$util.getDefValue(current_args.list_type, 'text')"
        :on-remove="fileOnRemove"
        :on-success="fileOnSuccess"
        :on-error="fileOnError"
        :on-progress="fileOnProgress"
        :on-change="fileOnChange"
        :before-upload="fileOnBeforeUpload"
        :before-remove="fileOnBeforeRemove"
        :http-request="fileUpload"
        :file-list="fileList"
        :on-exceed="onExceed"
      >
        <el-button type="primary">点击上传</el-button>
        <div
          slot="tip"
          class="el-upload__tip"
          v-text="$util.getDefValue(current_args.placeholder, '')"
        ></div>
      </el-upload>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    value: {
      type: [Number, Array],
      default: function() {
        return []
      }
    },
    args: {
      type: Object,
      required: true
    },
    field: {
      type: String,
      default: ''
    },
    fileList: {
      type: Array,
      default: function() {
        return []
      }
    }
  },
  created() {
    this.hideUpload = this.fileList.length >= this.limitCount
  },
  data() {
    return {
      hideUpload: false,
      current_field: this.value,
      current_args: this.args,
      current_files: this.fileList
    }
  },
  computed: {
    // 上传数量限制
    limitCount() {
      let limit = this.$util.getDefValue(this.current_args.limit, 0)

      return limit > 0 ? limit : 999
    },
    // 禁止操作
    disabledValue() {
      if (this.current_args.disabled == '1') {
        return true
      }

      return null
    },
    // 多文件上传
    multipleValue() {
      if (this.current_args.limit == 1) {
        return null
      }

      return true
    },
    // 自动上传
    autoUploadValue() {
      if (this.current_args.autoupload == 1) {
        return true
      }

      return false
    },
    // 单文件图片上传时,显示的预览图片
    showUrl() {
      let file = false
      if (this.$util.isDef(this.current_files[0])) {
        file = this.current_files[0]
      }

      if (file && this.$util.isDef(file.url)) {
        // return config.api_url + file.url;
        return file.url
      }
      return ''
    }
  },
  watch: {
    current_field(value) {
      this.$emit('update:value', value)
    }
  },
  methods: {
    /** 附件手动点击上传方法 */
    submitUpload: function() {
      let ref = 'upload_' + this.field
      this.$refs[ref].submit()
    },
    clearFiles: function() {
      let ref = 'upload_' + this.field
      this.$refs[ref].clearFiles()
      this.current_field = []
    },
    onExceed: function() {
      this.$message.error(
        '最多上传' + this.current_args.limit + '个文件，如需继续上传，请先删除文件'
      )
    },
    fileOnRemove: function(file, fileList) {
      this.hideUpload = fileList.length >= this.limitCount
      let attachId = file.id || file.response.data.id
      this.setValue(attachId, false)
      this.$emit('file:event', {
        event: 'fileOnRemove',
        file: file,
        fileList: fileList
      })
    },
    fileOnSuccess: function(response, file, fileList) {
      let attachId = file.id || response.data.id
      this.setValue(attachId, true)
      // 如果是上传头像,重设图片显示地址
      if (this.current_args.upload_type == 'avatar') {
        this.current_files = []
        this.current_files.push({ name: file.name, url: response.data.fileurl })
      }
      this.$emit('file:event', {
        event: 'fileOnSuccess',
        file: file,
        fileList: fileList,
        response: response
      })
    },
    fileOnError: function(error, file, fileList) {
      this.$emit('file:event', {
        event: 'fileOnError',
        error: error,
        file: file,
        fileList: fileList
      })
    },
    fileOnProgress: function(eventData, file, fileList) {
      this.$emit('file:event', {
        event: 'fileOnProgress',
        eventData: eventData,
        file: file,
        fileList: fileList
      })
    },
    fileOnChange: function(file, fileList) {
      this.hideUpload = fileList.length >= this.limitCount
      this.$emit('file:event', {
        event: 'fileOnChange',
        file: file,
        fileList: fileList
      })
    },
    fileOnBeforeUpload: function(file) {
      this.$emit('file:event', {
        event: 'fileOnBeforeUpload',
        file: file
      })
    },
    fileOnBeforeRemove: function(file, fileList) {
      this.$emit('file:event', {
        event: 'fileOnBeforeRemove',
        file: file,
        fileList: fileList
      })
    },
    /** 自定义文件上传方法,采用分片上传 */
    fileUpload: function(params) {
      console.log(params)
      // 分片上传 每4M为一片
      this.$upload.submit(params, true, 2)
    },
    setValue: function(attachId, action) {
      if (action === true) {
        // 添加
        if (this.$util.array(this.current_field)) {
          this.current_field.push(attachId)
        } else {
          this.current_field = attachId
        }
      } else {
        if (this.$util.array(this.current_field)) {
          this.current_field.splice(
            this.current_field.findIndex(item => item === attachId),
            1
          )
        } else {
          this.current_field = 0
        }
      }
    }
  }
}
</script>
<style lang="scss">
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  &:hover {
    border-color: #409eff;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
}

.picture-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  display: inline-flex;
  flex-direction: column;
  justify-items: center;
  justify-content: center;
  &:hover {
    border-color: #409eff;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    line-height: 1;
    text-align: center;
  }
  .avatar-uploader-icon-text {
    font-size: 13px;
    font-weight: 400;
    color: #b5b5b6;
    line-height: 1;
    text-align: center;
    margin-top: 10px;
  }
}

.hide-upload .el-upload--picture-card {
  display: none;
}

.edu-form-upload {
  max-width: 600px;
}
</style>
<style lang="scss" scoped>
::v-deep .upload-container .el-upload__tip {
  color: #b7bac1;
}
</style>
